<template>
  <div class="login-box">
    <el-container>
    <el-header>抢课系统后台管理</el-header>
    <!-- 通过:rules="loginFormRules"来绑定输入内容的校验规则 -->
    <el-form :rules="loginFormRules" ref="loginForm" :model="loginForm" label-position="right" label-width="auto" show-message>
      <!-- <span class="login-title">管理员登录</span> -->
      <div style="margin-top: 5px"></div>
      <el-form-item label="用户名" prop="loginName">
        <el-col :span="22">
          <el-input type="text" v-model="loginForm.loginName"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="密码" prop="loginPassword">
        <el-col :span="22">
          <el-input type="password" v-model="loginForm.loginPassword"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" plain @click="loginSubmit('loginForm')">登录</el-button>
      </el-form-item>
    </el-form>
    {{ login_info }}
    </el-container>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      login_info: "",
      loginForm: {
        loginName: '',
        loginPassword: ''
      },
      // 表单验证，需要在 el-form-item 元素中增加 prop 属性
      loginFormRules: {
        loginName: [
          {required: true, message: '账号不可为空', trigger: 'blur'}
        ],
        loginPassword: [
          {required: true, message: '密码不可为空', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    loginSubmit(formName) {
      // 为表单绑定验证功能
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let data = new FormData()
          data.append('userid', this.loginForm.loginName)
          data.append('password', this.loginForm.loginPassword)
          data.append('admin', "true")
          this.$axios.post('/api/login/', data).then((res) => {
            if(res.data["login"] === "true"){
              sessionStorage.setItem("userid", this.loginForm.loginName)
              sessionStorage.setItem("admin", "true")
              sessionStorage.setItem("token", res.data["token"])
              this.$router.push("/admin")
            }
            else{
              if(res.data["login_cnt"] !== undefined){
                this.login_info = "用户名或密码错误，该用户名连续登录失败" + res.data["login_cnt"] + "次"
              } else if(res.data["login_wait"] !== undefined){
                this.login_info = "用户名或密码错误，该用户名连续登录失败3次，请"+res.data["login_wait"]+"秒后再试"
              } else {
                this.login_info = "用户名或密码错误，用户名须为纯数字"
              }
              console.log("password error!!")
            }
            return false;
          }).catch((res) => {
            this.login_info = "用户名或密码错误"
            console.log("error submit!!")
            return false
          })
        } else {
          this.login_info = "用户名或密码错误"
          return false
        }
      })
    }
  }
}
</script>

<style scoped>
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
    font-size: 25px;
    font-weight: bold;
  }
.login-box {
  border: 1px solid #DCDFE6;
  width: 350px;
  margin: 180px auto;
  padding: 35px 35px 15px 35px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  /*box-shadow: 0 0 25px cornflowerblue;*/
}
.login-title {
  text-align: center;
  margin: 0 auto 40px auto;
  color: cornflowerblue;
  font-size: 30px;
  font-weight: bold;
}
</style>
